<template>
    <div>
      <el-dialog
        :title="$props.title"
        v-el-drag-dialog
        :visible.sync="show"
        :modal="false"
      >
        <el-table
          :data="data"
          @row-click="handleRowClick"
          style="width: 100%"
          height="250"
        >
          <el-table-column
            property="name"
            label="名字"
            width="150"
          ></el-table-column>
          <el-table-column
            property="arearain"
            label="面雨量"
            width="200"
          ></el-table-column>
          <el-table-column
            property="criticalPrecipitation"
            label="阈值"
          ></el-table-column>
          <el-table-column
            property="status_difference"
            label="超阈值"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { Vector } from "ol/layer";
  import { Vector as VectorSource } from "ol/source";
  import { Feature } from "ol";
  import { Point, Polygon } from "ol/geom";
  import { Style, Fill, Circle, Stroke } from "ol/style";
  import elDragDialog from "@/views/surfaceRainfallForecast/compoents/el-drag-dialog";
  export default {
    props: ["title", "dialogTableVisible", "currentData"],
    name: "DialogList",
    directives: {
      elDragDialog,
    },
    data() {
      return {
        //高亮的图层
        statusDifferenceHighLayer: null,
      };
    },
    computed: {
      show: {
        get() {
          return this.$props.dialogTableVisible;
        },
        set(val) {
          this.$emit("closedDiglogZN");
        },
      },
      data() {
        // if (!this.$props.currentData) {
        //   return {};
        // }
        // return this.$props.currentData;
        return [];
      },
    },
    mounted() {
      this.statusDifferenceHighLayer = new Vector({
        source: new VectorSource({}),
        name: "surface-rainfall-forecast-status-difference-highLayer",
        zIndex: 100,
      });
      this.$store.getters.Map.map.addLayer(this.statusDifferenceHighLayer);
    },
    methods: {
      handleRowClick(row) {
        console.log(row);
        const lat = parseFloat(row.longitude);
        const lng = parseFloat(row.latitude);
        this.$store.getters.Map.view.animate({
          center: [lat, lng],
          duration: 1000,
        });
        const feature = new Feature({
          geometry: new Point([lat, lng]),
        });
       let radius;
       if(parseFloat(row.arearain) >= 20 ){
        radius = parseFloat(row.arearain) ;
       }else if(parseFloat(row.arearain) <=10  ){
        radius = parseFloat(row.arearain) * 2;
       }else if(parseFloat(row.arearain) >=50){
        radius = 50;
       }else{
        radius = parseFloat(row.arearain);
       }
        //添加高亮点图层
        if (row.status_difference > 0) {
          feature.setStyle(
            new Style({
              image: new Circle({
                radius: parseFloat(row.arearain) * 3,
                fill: new Fill({
                  color: "red",
                }),
              }),
            })
          );
        }
        else {
          feature.setStyle(
            new Style({
              image: new Circle({
                radius: radius,
                fill: new Fill({
                  color: "green",
                }),
              }),
            })
          );
        }
        this.statusDifferenceHighLayer.getSource().clear();
        this.statusDifferenceHighLayer.getSource().addFeature(feature);
      },
    },
    beforeDestroy() {
      this.$store.getters.Map.map.removeLayer(this.statusDifferenceHighLayer);
    },
  };
  </script>
  
<style scoped lang="scss">
::v-deep .el-dialog{
    width: 30%;
}
</style>
  